<template>
	<view class="modal">
		<view class="modal-container">
			<view class="modal-header">
				<view class="modal-title">当前对话设置</view>
				<view class="modal-close-btn" @click="closeModal">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
			</view>
			<view class="modal-content">
				<view class="context-prompt">
					<view class="context-prompt-row" v-for="(item, index) in (chatBody.context)">
						<view class="context-role">
							<uni-data-select v-model="item.role" :localdata="range" :clear="false"/>
						</view>
						<u-input placeholder="请输入新的预设对话" v-model="item.content" border="bottom"/>
						<button class="button-icon-button button-border context-delete-button clickable"
						        role="button" @click="removePrompt(index)">
							<view class="button-icon-button-icon">
								<uni-icons type="close" size="20"></uni-icons>
							</view>
						</button>
					</view>
					<view class="context-prompt-row">
						<button class="button-icon-button button-border context-prompt-button clickable" role="button"
						        @click="addPrompt">
							<view class="button-icon-button-icon">
								<uni-icons type="plusempty" size="20"></uni-icons>
							</view>
							<view class="button-icon-button-text">新增预设对话</view>
						</button>
					</view>
				</view>
				<z-chat-setting ref="chatConfig" :config="chatBody.config"/>
			</view>
			<view class="modal-footer">
				<view class="modal-actions">
					<view class="modal-action">
						<button class="button-icon-button button-border  clickable"
						        role="button">
							<view class="button-icon-button-icon false">
								<uni-icons type="refreshempty" size="20"></uni-icons>
							</view>
							<view class="button-icon-button-text">重置默认</view>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	emits: ["closeModal"],
	props: {
		chatBody: {
			type: Object
		},
	},
	data() {
		return {
			range: [
				{value: "system", text: "system"},
				{value: "user", text: "user"},
				{value: "assistant", text: "assistant"},
			],
			modelRange: uni.$u.chat.modelRange,
		}
	},
	created() {
		if (!this.chatBody.config) {
			this.chatBody.config = uni.$u.chat.globalConfig.config;
		}
	},
	methods: {
		closeModal() {
			this.$refs.chatConfig.updateValue();
			this.$emit("closeModal");
		},
		addPrompt() {
			this.chatBody.context.push({
				role: "system",
				content: "",
				date: uni.$u.chat.curDate(),
			})
		},
		removePrompt(index) {
			this.chatBody.context.splice(index, 1);
		}
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.modal {
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	height: var(--full-height);
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-container {

	/* color */
	--white: white;
	--black: rgb(48, 48, 48);
	--gray: rgb(250, 250, 250);
	--primary: rgb(29, 147, 171);
	--second: rgb(231, 248, 255);
	--hover-color: #f3f3f3;
	--bar-color: rgba(0, 0, 0, 0.1);
	--theme-color: var(--gray);

	/* shadow */
	--shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
	--card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);

	/* stroke */
	--border-in-light: 1px solid rgb(222, 222, 222);

	box-shadow: var(--card-shadow);
	background-color: var(--white);
	border-radius: 12px;
	width: 60vw;
	max-width: calc(var(--container-max-width) * 0.8);
	animation: slide-in ease 0.3s;

	--modal-padding: 20px;

	.modal-header {
		padding: var(--modal-padding);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: var(--border-in-light);

		.modal-title {
			font-weight: bolder;
			font-size: 16px;
		}

		.modal-close-btn {
			cursor: pointer;

			&:hover {
				filter: brightness(1.2);
			}
		}
	}

	.modal-content {
		max-height: 40vh;
		padding: var(--modal-padding);
		overflow: auto;
	}

	.modal-footer {
		padding: var(--modal-padding);
		display: flex;
		justify-content: flex-end;
		border-top: var(--border-in-light);
		box-shadow: var(--shadow);

		.modal-actions {
			display: flex;
			align-items: center;

			.modal-action {
				&:not(:last-child) {
					margin-right: 20px;
				}
			}
		}
	}
}

.context-prompt {

	margin-bottom: 20px;

	.context-prompt-row {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-bottom: 10px;

		.context-role {
			width: 100px;
			margin-right: 10px;
		}

		.context-content {
			flex: 1;
			max-width: 100%;
			text-align: left;
		}

		.context-delete-button {
			margin-left: 10px;
		}
	}

	.context-prompt-button {
		flex: 1;
	}
}

</style>